<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <title>漏斗图</title>
  <link rel="stylesheet" href="./assets/common.css">
</head>
<body>
<div>
  <canvas id="mountNode"></canvas>
</div>
<script src="./assets/jquery-3.2.1.min.js"></script>
<script src="https://gw.alipayobjects.com/os/rmsportal/NjNldKHIVQRozfbAOJUW.js"></script>
<script src="../build/f2-all.js"></script>
<script src="https://gw.alipayobjects.com/os/rmsportal/NjNldKHIVQRozfbAOJUW.js"></script>
<script>
  let data = [
    { action: '浏览网站', pv: 50000, percent: 1 },
    { action: '放入购物车', pv: 35000, percent: 0.7 },
    { action: '生成订单', pv: 25000, percent: 0.5 },
    { action: '支付订单', pv: 15000, percent: 0.3 },
    { action: '完成交易', pv: 8000, percent: 0.16 },
  ];
  var chart = new F2.Chart({
    id: 'mountNode',
    pixelRatio: window.devicePixelRatio,
    padding: [60, 80, 15, 15 ]
  });

  chart.source(data);
  chart.axis(false);
  chart.coord({
    transposed: true,
    // scale: [1, -1]
  });
  // chart.tooltip(false);
  // chart.legend(false);
  chart.intervalLabel({
    label: (data, color) => {
      return {
        text: data.action
      };
    }
  })

  // 提示文案
  data.forEach(function(obj) {
    chart.guide().text({
      position: [ obj.action, 0.5 ],
      content: (obj.percent * 100).toFixed(0) + '%',
      style: {
        textBaseline: 'middle',
        textAlign: 'center',
        fill: '#fff'
      },
    });
  });

  chart.interval()
    .position('action*percent')
    .color('action', [ '#0050B3', '#1890FF', '#40A9FF', '#69C0FF', '#BAE7FF' ])
    .adjust('symmetric')
    .style({
      lineWidth: 2,
      stroke: '#fff'
    })
    .shape('funnel');
  chart.render();
</script>
</body>
</html>
